<template>
  <div
    class="orgAndUser"
    style="padding: 2% 3%; background: #f7f7f7; height: calc(100vh - 50px)"
  >
    <el-card class="box-card" shadow="never">
		<template #header>
			<div  class="clearfix">
				<span>组织架构</span>
			</div>
		</template>
      <el-tree
        ref="participateDep"
        v-loading="depLoading"
        :check-on-click-node="false"
        :check-strictly="true"
        :data="participateDepList"
        :default-expanded-keys="showKeys"
        :expand-on-click-node="false"
        :highlight-current="true"
        class="participateDep"
        empty-text="暂无参会部门信息"
        node-key="id"
        @check="check"
        @node-click="nodeClick"
        @check-change="checkDepChange"
      >
        <template v-slot="{ data }">
          <span class="custom-tree-node">
            <span>{{ splitLevelName(data.orgName) }}</span>
          </span>
        </template>
      </el-tree>
    </el-card>
    <el-card class="box-card card2" shadow="never">
		<template  #header>
			<div  class="clearfix">
				<span>{{ currentDep.orgName }}</span>
				<el-button
					v-if="isDep"
					class="add-btn"
					type="text"
					@click="
            ;(openData = '添加'), (isOrg = 1), (orgDisabled = true), addBtn()
          "
				>添加
				</el-button>
			</div>
		</template>
      <el-form
        v-if="isDep"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-input
          v-model="formInline.name"
          clearable
          placeholder="查询组织用户"
        >
			<template #append>
				<el-button
					icon="el-icon-search"
					@click="getUser(formInline.name)"
				/>
			</template>
        </el-input>
      </el-form>
      <el-tree
        ref="participants"
        v-loading="userLoading"
        :check-on-click-node="true"
        :class="isDep ? 'isDep-tree' : ''"
        :data="participants"
        :expand-on-click-node="false"
        default-expand-all
        empty-text="暂无组织用户信息"
        node-key="id"
        @check-change="checkUserChange"
      >
        <template v-slot="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ data.cn }} <br>
              <span class="user-position">{{ data.levelName }}</span>
            </span>
            <span>
              <el-button
                plain
                size="mini"
                type="primary"
                @click="
                  ;(isOrg = 1),
                    (openData = '修改'),
                    (orgDisabled = false),
                    editBtn(data),
                    replaceAreaName()
                "
              >
                修改
              </el-button>
              <el-button
                plain
                size="mini"
                type="danger"
                @click="() => remove(node, data)"
              >
                删除
              </el-button>
            </span>
          </span>
        </template>
      </el-tree>
    </el-card>

    <!-- 弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="openData"
      v-model="dialogFormVisible"
      width="800px"
    >
      <!-- 组织架构 -->
      <div v-if="isOrg == 0">
        <div style="margin-top: 10px; margin-bottom: 10px">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{}"
              @click="router(1, 0)"
            >首页
            </el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in breadList"
              :key="item.pId"
              :to="{}"
              @click="router(item, index)"
            >
              {{ item.levelName }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-table
          ref="listTree"
          v-loading="loadingTree"
          :data="listTree"
          border
          fit
          highlight-current-row
          stripe
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column label="组织" prop="levelName"/>
          <el-table-column fixed="right" label="操作" width="150">
            <template v-slot="scope">
              <el-button
                size="small"
                type="text"
                @click="TreeFindSuperior(scope.row)"
              >查看下级
              </el-button>
              <el-button
                size="small"
                type="text"
                @click="TreeSureBtn(scope.row)"
              >选择该组织
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-else>
        <el-form
          ref="searchForm"
          :model="searchForm"
          :rules="rules"
          label-position="right"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户姓名" prop="cn">
                <el-input
                  v-model="searchForm.cn"
                  class="form-item"
                  clearable
                  placeholder="示例：张三"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="OA账号" prop="uumId">
                <el-input
                  v-model="searchForm.uumId"
                  class="form-item"
                  clearable
                  placeholder="示例：zhangsan"
                />
              </el-form-item>

            </el-col> -->
          <!-- </el-row>
          <el-row> -->
            <el-col :span="12">
              <el-form-item label="手机号码" prop="mobile">
                <el-input
                  v-model="searchForm.mobile"
                  class="form-item"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户邮箱" prop="email">
                <el-input
                  v-model="searchForm.email"
                  class="form-item"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工职位" prop="levelName">
                <el-select
                  v-model="searchForm.levelName"
                  class="form-item"
                  clearable
                >
                  <el-option
                    v-for="item in positionList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 系统管理员 -->
          <el-row
            v-if="openData === '修改' || currentDep.levelName === '组织用户'"
          >
            <el-col :span="12">
              <!--              <el-form-item label="所属公司" prop="companyId">-->
              <!--                <el-select-->
              <!--                  v-model="searchForm.companyId"-->
              <!--                  class="form-item"-->
              <!--                  clearable-->
              <!--                  placeholder="请选择所属公司"-->
              <!--                  @change="companyChange(), isOrg == 1"-->
              <!--                >-->
              <!--                  <el-option-->
              <!--                    v-for="item in companyList"-->
              <!--                    :key="item.id"-->
              <!--                    :label="item.name"-->
              <!--                    :value="item.id"-->
              <!--                  />-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
            </el-col>
            <el-col :span="12"/>
          </el-row>
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="员工编号" prop="empNum">
                <el-input
                  v-model="searchForm.empNum"
                  class="form-item"
                  clearable
                />
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                class="label-center"
                label="用户角色"
                prop="roleIdList"
              >
                <el-select
                  v-model="searchForm.roleIdList"
                  class="form-item"
                  clearable
                  multiple
                >
                  <el-option
                    v-for="item in ajaxArray.roleList"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="openData === '修改'">
              <el-form-item label="所在组织" prop="openTreeBtnData">
                <el-button
                  class="form-item"
                  @click="innerVisible = true"
                >{{ openTreeBtnData }}
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工状态">
                <el-select
                  v-model="searchForm.status"
                  class="form-item"
                  clearable
                >
                  <el-option
                    v-for="item in stateList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作地点" prop="addr">
                <el-select
                  v-model="searchForm.addr"
                  class="form-item"
                  clearable
                >
                  <el-option
                    v-for="item in addrList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            </el-row>
            <el-row>
			<el-col :span="24" v-if="searchForm.descList.length > 0">
				<el-form-item label="工作职责" prop="descList"></el-form-item>
			</el-col>
			<el-col :span="24" v-for="(domain, index) in searchForm.descList" :key="index">
				<el-form-item :label="index + 1" :prop="'descList.' + index + '.value'"
					:rules="{ required: true, message: '工作职责不能为空', trigger: 'blur' }">
					<el-input v-model="domain.value" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"
						maxlength="100" resize="none" clearable></el-input>
					<el-button text @click.prevent="removeDomain(domain)" type="danger">删除</el-button>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="" >
					<el-button @click="addDomain">新增职责</el-button>
				</el-form-item>
			</el-col>
          </el-row>
        </el-form>
      </div>
		<template #footer>
			<div
				v-show="isOrg == 0 ? true : false"
				class="dialog-footer"
			>
				<el-button
					@click=";(dialogFormVisible = false), TreeSubmitBtn()"
				>重 置
				</el-button>
			</div>
			<div
				v-show="isOrg == 0 ? false : true"
				class="dialog-footer"
			>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="checkOrg()" :loading="addOrUpdateLoad">确 定</el-button>
			</div>
		</template>

      <el-dialog
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        v-model="innerVisible"
        append-to-body
        class="dialog dep-dialog"
        title="请选择组织架构"
        width="50%"
      >
        <div style="margin-top: 10px; margin-bottom: 10px">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{}"
              @click="router(1, 0)"
            >首页
            </el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in breadList"
              :key="item.pId"
              :to="{}"
              @click="router(item, index)"
            >
              {{ item.orgName }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-table
          ref="listTree"
          v-loading="loadingTree"
          :data="listTree"
          border
          fit
          height="400"
          highlight-current-row
          stripe
          style="width: 100%"
        >
          <el-table-column label="组织" prop="orgName"/>
          <el-table-column fixed="right" label="操作" width="150">
            <template v-slot="{row}">
              <el-button
                size="small"
                style="padding: 0"
                type="text"
                @click="TreeFindSuperior(row)"
              >查看下级
              </el-button>
              <el-button
                size="small"
                style="padding: 0"
                type="text"
                @click="TreeSureBtn(row)"
              >选择该组织
              </el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        <pagination-->
<!--          v-show="orgListQuery.total > 0"-->
<!--          :limit.sync="orgListQuery.size"-->
<!--          :page.sync="orgListQuery.page"-->
<!--          :total="orgListQuery.total"-->
<!--          @pagination="getTreeList()"-->
<!--        />-->
		  <template #footer>
			  <div  class="dialog-footer">
				  <el-button
					  @click=";(innerVisible = false), TreeSubmitBtn()"
				  >重 置
				  </el-button>
			  </div>
		  </template>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
// import FormInit from '@/config/FormInit'

let id = 0
export default {
	// mixins: [FormInit],
	data() {
		const checkPhone = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请输入手机号'))
			} else {
				const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
				if (reg.test(value)) {
					callback()
				} else {
					return callback(new Error('请输入正确的手机号'))
				}
			}
		}
		const openTreeBtnData = (rule, value, callback) => {
			callback()
		}
		return {
			id: 'id',
			currentPage: 1, // 分页
			openData: '',
			loadingTable: true,
			dialogFormVisible: false, // 弹出框
			// listLoading: true, // 是否loading
			// 搜索条件
			listQuery: {
				page: 1,
				size: 20,
				total: 0
			},
			total: 30,
			list: [], // 表格数据
			multipleSelection: [], // 多选框选中对象数组
			editorOption: { // 富文本 设置
				modules: {}
			},
			currentDep: {
				levelName: '组织用户'
			},
			positionList: [
				'省公司领导（正）',
				'省公司领导（副）',
				'省公司部门领导（正）',
				'省公司部门领导（副）',
				'省公司三级经理',
				'省公司中心领导（正）',
				'省公司中心领导（副）',
				'省公司部门助理',
				'省公司员工',
				'地市领导（正）',
				'地市领导（副）',
				'地市部门领导（正）',
				'地市部门领导（副）',
				'地市中心领导（正）',
				'地市中心领导（副）',
				'地市部门助理',
				'地市员工',
				'区县领导（正）',
				'区县领导（副）',
				'区县员工',
				'公共用户'
			],
			queryParam: '',
			supervisionTypes: ['立项阶段', '制定档案阶段', '检查阶段', '报告阶段', '持续跟进阶段'],
			stateList: ['休假', '出差'],
			addrList: ['省公司', '趵突泉园区', '德亨大厦'],
			addOrUpdateLoad: false,

			selectDep: [],
			participants: [],
			participateDepList: [],
			selId: [],
			joinList: {
				selectDep: [],
				selectParticipants: ''
			},
			selectParticipants: [],
			participateStatus: false,
			formInline: {
				user: '',
				dep: ''
			},
			userDatas: [],
			showKeys: [], // 展示节点的key,
			userLoading: true,
			depLoading: true,
			selectLoading: true,
			meetForm: [],
			url: {
				list: '',
				edit: '/jjUser/modify',
				del: '/jjUser/delete',
				add: '/jjUser/add'
			},
			ajaxArray: {
				role: {
					roleId: '',
					roleName: ''
				}
			},
			form: {
				pids: '',
				name: '',
				phone: '',
				orgId: '',
				orgLevel: ''
			},
			companyList: [],
			name: '',
			openTreeBtnData: '请选择组织',
			// treeOpenDisabled: true,
			innerVisible: false,
			areaIdsOptions: null,
			orgOptions: null,
			props: {
				lazy: true,
				lazyLoad(node, resolve) {
					const {levelNum} = node
					const nodes = Array.from({length: levelNum + 1}).map(() => ({
						value: ++id,
						label: `选项${id}`,
						leaf: levelNum >= 2
					}))
					// 通过调用resolve将子节点数据返回，通知组件数据加载完成
					resolve(nodes)
				}
			},
			orgData: {
				companyId: '',
				levelNum: '1',
				pId: ''
			},
			listTree: [],
			loadingTree: false,
			company: '',
			isOrg: '',
			orgDisabled: false,
			orgBtnData: '请选择组织',
			searchForm: {
				uumId: '',
				cn: '',
				mobile: '',
				email: '',
				empNum: '',
				levelName: '',
				orgNo: '',
				roleIdList: '',
				status: '',
				addr: '',
				descList: []
			},
			value: '',
			tiao: '',
			ye: '',
			rules: {
				uumId: [{required: true, message: '请输入员工OA账号', trigger: 'change'}],
				cn: [{required: true, message: '请输入姓名', trigger: 'blur'}],
				mobile: [{validator: checkPhone, required: true}],
				email: [
					{required: true, message: '请输入邮箱地址', trigger: 'blur'},
					{
						type: 'email',
						message: '请输入正确的邮箱地址',
						trigger: ['blur', 'change']
					}
				],
				empNum: [{required: true, message: '请输入员工编号', trigger: 'blur'}],
				levelName: [{required: true, message: '请输入员工职位', trigger: 'blur'}],
				orgNo: [{validator: openTreeBtnData, required: true}],
				roleIdList: [{required: true, message: '请选择角色', trigger: 'blur'}],
				descList: [{required: true}],
				addr: [{required: true, message: '请选择工作地点', trigger: 'blur'}],
			},
			formTree: {
				companyId: '',
				orgNo: this.$TOOL.data.get('USER_INFO').companyId,
				id: '',
				levelNum: 1,
				levelName: ''
			},
			breadList: [],
			pId: '',
			treeDisabled: true,
			userArr: [],
			tableHeight: document.documentElement.clientHeight - 200,
			optionsData: [
				{
					value: 'zhinan',
					label: '指南',
					children: [
						{
							value: 'shejiyuanze',
							label: '设计原则',
							children: [
								{
									value: 'yizhi',
									label: '一致'
								},
								{
									value: 'fankui',
									label: '反馈'
								},
								{
									value: 'xiaolv',
									label: '效率'
								},
								{
									value: 'kekong',
									label: '可控'
								}
							]
						},
						{
							value: 'daohang',
							label: '导航',
							children: [
								{
									value: 'cexiangdaohang',
									label: '侧向导航'
								},
								{
									value: 'dingbudaohang',
									label: '顶部导航'
								}
							]
						}
					]
				}
			],
			orgListQuery: {
				size: 10,
				page: 1,
				total: 0
			},
			excelDialog: false
		}
	},
	computed: {
		isDep() {
			return this.currentDep.id !== this.currentDep.companyId
		}
	},
	watch: {
		dialogFormVisible: {
			handler(newVal) {
				if (newVal === false) {
					// .log(this.$refs.searchForm);
					this.$refs.searchForm.resetFields()
				}
			},
			deep: true
		}
	},
	created() {
		this.getDep()
		this.participantsClick()
		this.getCompanyData()
		this.getTreeList()
		this.notADmin() // 不是管理员
	},
	mounted() {
		window.addEventListener('resize', this.getHeight, false)
	},
	methods: {
		addDomain() {
        	this.searchForm.descList.push({
        	  value: '',
        	});
        },
      	removeDomain(item) {
      	  var index = this.searchForm.descList.indexOf(item)
      	  if (index !== -1) {
      	    this.searchForm.descList.splice(index, 1)
      	  }
      	},
		initAddForm() {
		},
		// 查询
		onSubmit() {
			this.fetchList()
		},
		// 确定提交表单
		async submitForm() {
			this.$refs.searchForm.validate(async valid => {
				if (valid) {
					this.addOrUpdateLoad = true;
					let lists;
					if (this.openData === '添加') {
						this.searchForm.username = this.searchForm.phone
						if (this.currentDep.levelName !== '组织用户') {
							this.searchForm.orgId = this.currentDep.id
							this.searchForm.orgLevel = this.currentDep.levelNum
						} else {
							this.currentDep.id = this.searchForm.orgId
						}
						lists = await this.$API.uum.add.post( this.searchForm)
					} else if (this.openData === '修改') {
						lists = await this.$API.uum.edit.post( this.searchForm)
					}

					if (lists.code !== 200) {
						return
					}
					this.$message.success(this.openData + '成功！');
					this.dialogFormVisible = false;
					this.addOrUpdateLoad = false;
					console.log(this.currentDep);
					this.getUserByOrgId(this.currentDep.orgNo);
				} else {
					return false
				}
			})
		},

		splitLevelName(levelName) {
			const value = levelName.split('\\')
			return value.slice(-1)[0]
		},
		// 重写
		fetchList() {
		},
		async getTreeList() {
			//  searchForm: this.formTree
			const params = {
				parentNo: this.formTree.orgNo,
				...this.orgListQuery
			}
			const lists = await this.$API.uum.list.get(params)
			console.log(lists)
			this.listTree = lists.data.records
			this.orgListQuery.total = lists.data.total
		},
		update(data) {
			const newChild = {id: id++, label: 'testtest', children: []}
			if (!data.children) {
				this.$set(data, 'children', [])
			}
			data.children.push(newChild)
		},
		async remove(node, data) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const res = await this.$API.uum.delete.post({id: data.id})
				// _doneTip.call(this, res, mes)
				if (res.code === 200) {
					this.$message({
						type: 'success',
						message: '删除成功!'
					})
					const parent = node.parent
					const children = parent.data.children || parent.data
					const index = children.findIndex((d) => d.id === data.id)
					children.splice(index, 1)
				}
			})
		},
		// 设置部门默认展开第一行
		setShowKeys(data) {
			this.showKeys = data.map((item) => {
				return item.id
			})
		},
		check() {
		},
		nodeClick(data) {
			console.log(data)
			this.currentDep = data
			this.formInline.user = ''
			this.userLoading = true
			// 获取用户信息
			this.getUserByOrgId(data.orgNo).then(() => {
				this.userLoading = false
			})
		},
		// 确定
		confirm() {
			this.$emit(
				'confirm',
				this.selId,
				this.$refs.participateDep.getCheckedKeys(),
				this.selectParticipants,
				this.selectDep
			)
		},
		// 组件赋值
		async participantsClick() {
			this.userLoading = true
			this.selectLoading = true
			this.userDatas = []

			// 设置选中数据
			this.$nextTick(async () => {
				this.formInline = {
					user: '',
					obj: ''
				}
				this.selectParticipants = []
				this.currentDep.levelName = '组织用户'
				this.participants = []
				this.userLoading = false
				this.selectLoading = false
			})
		},
		// 获取组织用户
		getUser() {
			this.getUserByOrgId( this.currentDep.orgNo, this.formInline.name)
		},

		// 获取参会部门
		async getDep() {
			this.depLoading = true
			this.$API.uum.comAndOrgTree.get().then((res) => {
				this.setShowKeys(res.data)
				this.participateDepList = res.data
				this.depLoading = false
			})
		},

		// 选择、取消部门
		checkDepChange(data, status) {
			this.formInline['user'] = ''
			this.currentDep = JSON.parse(JSON.stringify(data)) // 当前部门名称
			if (!status) {
				// 取消
				this.currentDep.levelName = '组织用户'
				this.participants = []
				this.selId = []
				this.selectParticipants = this.selectParticipants.filter((item) => {
					if (item.orgId !== data.id) {
						this.selId.push(item.id)
						return item
					}
				})
			}
			this.$refs.participants.setCheckedKeys(this.selId) // 选择已选择的组织用户并去重
			this.selectDep = this.$refs.participateDep.getCheckedNodes()
		},
		// 已选部门标签删除
		selectDepClose(tag) {
			this.selectDep.splice(this.selectDep.indexOf(tag), 1)
			this.$refs.participateDep.setCheckedNodes(this.selectDep)
		},
		selectUserClose(tag) {
			this.selectParticipants.splice(this.selectParticipants.indexOf(tag), 1)
			this.selId.splice(this.selId.indexOf(tag.id), 1)
			this.$refs.participants.setCheckedKeys(this.selId)
		},
		// 选择组织用户
		checkUserChange(data, status) {

			if (!status) {
				if (
					this.selectParticipants.findIndex((item) => item.id === data.id) >= 0
				) {
					this.selectParticipants.splice(
						this.selectParticipants.findIndex((item) => item.id === data.id),
						1
					)
					this.selId.splice(
						this.selId.findIndex((item) => item === data.id),
						1
					)
				}
			} else {
				// 选择
				if (!this.selectDep.some((item) => item.id === data.orgId)) {
					const depkeys = this.$refs.participateDep.getCheckedKeys()
					depkeys.push(data.orgId)
					this.$refs.participateDep.setCheckedKeys(depkeys)
				}
				if (!this.selId.includes(data.id)) {
					this.selectParticipants.push(data)
					this.selId.push(data.id)
				}
			}
		},
		// 重置
		resetChecked(tree) {
			this.$refs[tree].setCheckedKeys([])
			// participants 清空组织用户
			if (tree === 'participants') {
				this.selId = []
				this.selectParticipants = []
			} else {
				this.selectDep = []
			}
		},
		cancel() {
			this.participateStatus = false
		},
		replaceAreaName() {
			// for (var i = 0; i < this.searchForm.areaIdsList.length; i++) {
			//   this.searchForm.areaIdsList[i] = this.searchForm.areaIdsList[i].replace(
			//     /\s+/g,
			//     ''
			//   )
			// }
		},
		notADmin() {
			if (this.isAdmin === 0) {
				this.treeDisabled = false
				this.orgDisabled = false
				this.breadList = []
				this.getTreeList()
				this.formTree.levelNum = 1
			}
		},
		checkOrg() {
			if (
				this.openData === '修改' &&
				(this.openTreeBtnData === '请选择组织' || this.openTreeBtnData === '')
			) {
				this.$message.error('请选择组织')
			} else {
				this.submitArea()
				this.submitForm()
			}
		},
		submitArea() {
			// if (this.openData === '添加' || this.openData === '修改') {
			//   this.searchForm.areaId = this.searchForm.areaIdsList[
			//     this.searchForm.areaIdsList.length - 1
			//   ]
			// }
		},
		async getCompanyData() {
			// this.companyList = companyData.data
			// 获取角色
			const data = await this.$API.role.notPageList.get()
			this.ajaxArray.roleList = data.data
		},
		// 根据组织ID查询对应组织人员信息
		async getUserByOrgId(orgNo, name) {
			const list = await this.$API.uum.getJjUsers.get({orgNo,name: name || ''}) // 获取组织用户
			if (list.code === 200 || list.code === '200') {
				this.participants = list.data
				this.userLoading = false
			}
		},
		loadNode(node, resolve) {
			if (node.levelNum === 0) {
				return resolve([{name: 'region'}])
			}
			if (node.levelNum > 8) return resolve([])
			setTimeout(() => {
				const data = [
					{
						name: 'leaf',
						leaf: true
					},
					{
						name: 'zone'
					}
				]
				resolve(data)
			}, 500)
		},
		async companyChange() {
			// 是否为管理员
			this.breadList = []
			this.formTree.pId = ''
			this.formTree.levelNum = 1
			this.openTreeBtnData = '请选择组织'
			this.listTree = []
			this.searchForm.orgId = ''
			this.searchForm.orgLevel = ''
		},
		addBtn() {
			this.dialogFormVisible = true
			this.openData = '添加'
			this.$nextTick(() => {
				this.$refs.searchForm.resetFields()
				this.breadList = []
				this.openTreeBtnData = '请选择组织'
				this.formTree.pId = ''
				this.formTree.id = ''
				this.formTree.levelNum = 1
				this.formTree.levelName = ''
				this.searchForm.orgNo = this.currentDep.orgNo
				this.searchForm.id = ''
				this.searchForm.descList = [
					{ value: '' }
				]
			})
		},
		editBtn(e) {
			this.dialogFormVisible = true
			this.openData = '修改'
			this.$nextTick(() => {
				this.searchForm = Object.assign({}, e)
				this.searchForm.areaIdsList = e.areaIdsList
				this.formTree.levelNum = this.searchForm.orgLevel
				// this.getTreeList()
				console.log(this.searchForm)
				this.openTreeBtnData = this.searchForm.orgName
			})
		},
		router(e, index) {
			if (e === 1) {
				this.formTree.levelNum = 1
				this.formTree.pId = this.$store.getters.companyId
				this.breadList = []
				this.pId = ''
			} else {
				this.formTree = e
				this.pId = e.pId
				this.breadList = this.breadList.splice(0, index + 1)
			}
			this.getTreeList()
		},
		TreeFindSuperior(val) {
			if (val != null) {
				this.formTree = val
				this.formTree.pId = this.formTree.id
				this.breadList.length === 0
					? (this.formTree.levelNum = 2)
					: (this.formTree.levelNum = this.breadList.length + 1)
				this.pId = val.id
				this.breadList.push(val)
				delete this.formTree.id
				this.getTreeList()
			}
		},
		TreeSureBtn(val) {
			if (this.isOrg !== 0) {
				this.openTreeBtnData = val.orgName
				this.searchForm.orgNo = val.orgNo
				this.breadList.length === 0
					? (this.searchForm.orgLevel = 1)
					: (this.searchForm.orgLevel = this.breadList.length + 1)
				this.innerVisible = false
			} else {
				this.orgBtnData = val.orgName
				this.form.orgId = val.id
				this.breadList.length === 0
					? (this.form.orgLevel = 1)
					: (this.form.orgLevel = this.breadList.length + 1)
				this.dialogFormVisible = false
			}
		},
		TreeSubmitBtn() {
			if (this.openData === '添加' || this.openData === '修改') {
				this.searchForm.orgId = ''
				this.searchForm.orgLevel = ''
				this.openTreeBtnData = '请选择组织'
				this.breadList = []
				this.innerVisible = false
			} else {
				this.form.orgId = ''
				this.form.orgLevel = ''
				this.orgBtnData = '请选择组织'
				this.breadList = []
				this.dialogFormVisible = false
			}
		}
	}
}
</script>
<style scoped>
.form-item {
  width: 70%;
}
::v-deep .el-form-item__content {
	display: flex;
	.el-textarea {
		width: 90%;
	}
}
.participateDep .custom-tree-node {
  white-space: normal
}

.add-btn {
  float: right;
  padding: 0;
  color: #f0f2f4;
}

.box-card:first-child {
  float: left;
}

.box-card /deep/ .el-tree-node__content {
  min-height: 30px;
  height: auto;
}

.user-position {
  font-size: 12px;
  color: #b6b9bf;
  margin-left: 10px;
}

.card2 /deep/ .el-tree-node {
  /* height: 52px; */
  padding-top: 10px;
  border: 0;
  border-top: 1px solid #00000017;
  padding-bottom: 10px;
}

.card2 /deep/ .el-tree-node:last-child {
  border-bottom: 1px solid #00000017 !important;
}

.card2 /deep/ .el-tree {
  border: 1px solid #e8e8e8;
  min-height: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 17px;
}

/* 树状部门 */
.box-card {
  /* margin-right:40px; */
  /* margin-bottom: 15px; */
  width: 40%;
  height: 100%;
  /* margin:0 auto; */
}

.box-card /deep/ .el-card__header {
  padding: 15px 12px;
  background: #62adfc;
}

.clearfix > span {
  color: #fff;
  font-weight: 600;
}

.box-card /deep/ .el-card__body {
  height: calc(100% - 29px);
  overflow-x: hidden;
  border-bottom: 20px solid #fff;
}

.demo-form-inline {
  margin-bottom: 15px;
}

.demo-form-inline /deep/ .el-input__inner {
  height: 35px;
  border-radius: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.demo-form-inline /deep/ .el-input-group__append {
  border-radius: 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* .selectInfo{
  height: 300px;
} */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-right: 8px;
}

.custom-tree-node /deep/ .el-button--text:focus,
.el-button--text:hover {
  color: #409eff !important;
}

.custom-tree-node /deep/ .el-button--text {
  color: #b6b9bf;
}

.dialog /deep/ .el-dialog__body {
  padding: 20px;
  padding-top: 0;
  /* padding-left: 40px !important; */
}

.dialog /deep/ .el-dialog {
  margin-top: 11vh !important;
}

.dialog /deep/ .el-dialog__footer {
  padding-top: 0 !important;
}

.dialog /deep/ .el-dialog__header {
  padding-bottom: 8px !important;
}

.isDep-tree {
  min-height: calc(100% - 80px) !important;
}

.card2 >>> .el-tree__empty-block {
  position: absolute !important;
}
</style>
<style lang="scss" scoped>
.card2 {
  width: auto;
}

//@media screen and (max-height: 800px) {
//  .orgAndUser > > > .el-dialog {
//    width: 60% !important;
//  }
//  .dep-dialog > > > .el-dialog {
//    margin-top: 2vh !important;
//    width: 60% !important;
//  }
//  .orgAndUser > > > .el-dialog .el-form-item__label {
//    width: 84px !important;
//  }
//  .orgAndUser > > > .el-dialog .el-form-item__content {
//    margin-left: 84px !important;
//  }
//  .form-item {
//    width: 90%;
//  }
//}
//
//@media screen and(-ms-high-contrast: active),
//(-ms-high-contrast: none) and (max-height: 800px) {
//  .orgAndUser {
//    height: calc(100vh - 90px) !important;
//  }
//}
</style>

